<template>
	<view>
		<map class="map" id="map" @labeltap="labeltap"></map>
		<view class="map-mask" :class="{active:open}"></view>
		<view class="map-wrap" :style="{top:`${menuBtn.height + menuBtn.top + 8}px`}" :class="{open:open}">
			<view class="title-wrap u-flex">
				<text class="iconfont icon-back" @click="$app.back()"></text>
				<view class="tab-list u-flex-1">
					<u-tabs active-color="#de1f1c" :is-scroll="true" :gutter="10" :height="90" :list="list" :current="current" @change="change"></u-tabs>
				</view>
				<text class="iconfont icon-sousuo" @click="jump('/pages/search/search')"></text>
			</view>
			<!-- <view class="options-wrap">
				<u-dropdown active-color="#de1f1c" ref="uDropdown" @open="openDrop" @close="closeDrop" v-if="current ===1">
					<u-dropdown-item v-model="value[index]" :title="item.title" v-for="(item,index) in dropdown" :key="item.id">
						<view class="slot-content">
								<scroll-view scroll-y="true" class="slot-content-scroll">
									<view class="drop-item" v-for="(item,index) in 6" :key="index">
										<view class="title">距离</view>
										<view class="list u-flex u-flex-wrap">
											<view class="u-line-1 active">不限</view>
											<view class="u-line-1">附近1KM</view>
											<view class="u-line-1">附近2KM</view>
											<view class="u-line-1">附近3KM</view>
											<view class="u-line-1">附近4KM</view>
										</view>
									</view>
								</scroll-view>
								<view class="bottom-box u-flex">
									<view class="reset">
										<text class="iconfont icon-zhongzhi"></text>
										<view>重置</view>
									</view>
									<view class="btn">
										<u-button shape="circle" type="primary">确定</u-button>
									</view>
								</view>
								
							</view>
					</u-dropdown-item>
				</u-dropdown>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuBtn:uni.getMenuButtonBoundingClientRect(),
				list: this.$app.TYPE_MAP,
				current: 0,
				tabList:[0],
				lists:{},
				map:null
			}
		},
		methods: {
			change(index) {
				// 清除点
				this.map.addMarkers({
					clear: true,
					markers: []
				})
				
				this.current = index
				if(this.tabList.includes(index)){
					this.setMapData(index)
					return
				}
				this.getTypeList()
			},
			getTypeList(){
				const index = this.current
				this.$u.post('/api/maphouse/index',{type:index + 1}).then(res=>{
					this.lists[index] = res
					this.setMapData(index)
				})
			},
			setMapData(index){
				const data = this.lists[index]
				// 初始化中心点
				this.map.moveToLocation({
					longitude:Number(data.map.lng),
					latitude:Number(data.map.lat)
				})
				this.map.initMarkerCluster({
					enableDefaultStyle: false,
					zoomOnClick: true,
					gridSize: 60,
					complete(res) {
						//console.log('initMarkerCluster', res)
					}
				})
				
				this.map.on('markerClusterCreate', res => {
					const clusters = res.clusters
					const markers = clusters.map(cluster => {
						const {center,clusterId,markerIds } = cluster
						console.log(cluster)
						return  {
							...center,
							width: 0,
							height: 0,
							clusterId, // 必须
							label: {
								content: markerIds.length + '个',
								fontSize: 14,
								width: 66,
								height: 66,
								color:'#ffffff',
								bgColor: '#0e67f8',
								borderRadius: 33,
								textAlign: 'center',
								anchorX: 0,
								anchorY: -30,
							}
						}
					})
					this.map.addMarkers({
						markers,
						clear: false,
						complete(res) {
							//console.log('clusterCreate addMarkers', res)
						}
					})
				})
				
				// this.map.on('markerClusterClick', res =>{
				// 	console.log('markerClusterClick', res)
				// })
				let markers = []
				data.house.forEach(item=>{
					const marker = {
						id:item.id,
						latitude:Number(item.lat),
						longitude:Number(item.lng),
						iconPath:'/static/icon/none.png',
						width:1,
						height:1,
						joinCluster: true, // 指定了该参数才会参与聚合
						label:{
							// width:200,
							height: 30,
							borderRadius: 14,
							bgColor: '#0e67f8',
							color:'#ffffff',
							content:item.name,
							joinCluster:true,
							padding:10,
							textAlign: 'center'
						}
					}
					markers.push(marker)
				})
				this.map.addMarkers({
					markers,
					clear: false,
					complete(res) {}
				})
			},
			labeltap(e){
				const id = e.markerId
				this.$app.jump(`/pages/house/${this.$app.TYPE_MAP[this.current].key}/detail?id=${id}`)
			}
		},
		onLoad() {
			let obj = {}
			this.list.forEach((item,index)=>{
				obj[index] = ''
			})
			this.lists = obj
		},
		onReady() {
			this.map = uni.createMapContext('map',this)
			this.getTypeList()
		}
	}
</script>

<style lang="scss">
	.map{width: 100%;height: 100%;position: absolute;}
	.map-mask{position: absolute;width: 100%;height: 100%;top:-100%;
		&.active{backdrop-filter: blur(20rpx);top: 0;}
	}
	.map-wrap{position: absolute;left: 3%;top: 0;background-color: #fff;border-radius: 20rpx;width: 94%;box-shadow: 0 0 10rpx #ccc;
		&.open{border-radius: 20rpx 20rpx 0 0;}
		.title-wrap{
			// border-bottom: 1rpx solid #ccc;min-height: 70rpx;
			.icon-back{font-size: 48rpx;color: #111;padding: 0 0 0 20rpx;}
			.icon-sousuo{font-size: 36rpx;color: #111;padding: 0 20rpx 0 20rpx;}
			.tab-list{width: 0;}
		}
		/deep/ .u-dropdown__content__mask{display: none!important;}
		.options-wrap{
			.slot-content{background-color: #fff;border-radius: 0 0 20rpx 20rpx;
				.slot-content-scroll{min-height: 300rpx;max-height: 600rpx;border-top: 1rpx solid #ccc;}
				.drop-item{padding: 30rpx;
					.title{font-size: 34rpx;font-weight: bold;}
					.list{
						view{background-color: #f4f4f4;height: 60rpx;border-radius: 14rpx;padding: 4rpx 10rpx;line-height: 52rpx;text-align: center;width: 23%;margin: 10rpx 1% 0;font-size: 26rpx;}
						.active{background-color: #fad6d7;color: $tc;}
					}
				}
				.bottom-box{
					border-top: 1rpx solid #ccc;height: 120rpx;
					.reset{
						margin: 0 30rpx 0 40rpx;text-align: center;
						.iconfont{font-weight: bold;}
					}
					.btn{flex: 1;padding-right: 40rpx;}
				}
			}
		}
	}
</style>
